@charset "UTF-8";
/* -------------------------------------------------
 * product detail css
 * ------------------------------------------------- */

.cell-l{
	width: 756px;
	float: left;
}
.cell-r{
	width: 404px;
	float: right;
}

// product show
#pro-show-box{
	text-align: center;
	background-color: $white;
	position: relative;
	h2{
		height: 40px;
		line-height: 40px;
		text-align: left;
	}
	.pro-show-pic{
		position: relative;
		border: 1px solid $normalColor;
		width: 754px;
		height: 476px;
		overflow: hidden;
		.play-source{
			width: 100%;
			height: 100%;
			position: relative;
			text-align: center;
			img{
				@include imgCenter;
			}
		}
		.video-viewport{
			position: absolute;
			left: -100%;
			top: 0%;
			width: 100%;
			height: 100%;
			z-index: 10;
			opacity: 0;
			transition: left 0.5s ease-in-out 0s, opacity 0.5s ease-in-out 0s;

			embed{
				display: block;
				width: 100%;
				height: 100%;
			}
			&.vd{
				left: 0%;
				opacity: 1;
			}
		}
	}
	.pro-show-big{
		display: inline-block;
		width: 418px;
		position: relative;
		.pro-arrow{
			span{
				cursor: pointer;
				position: absolute;
				width: 30px;
				height: 77px;
				background: url(../img/main-icons.png) no-repeat 2px 18px;
				text-indent: -999px;
				overflow: hidden;
				top: 13px;
			}
			span.arr-l{
				left: 0;
			}
			span.arr-r{
				right: 0;
				background-position: -48px 18px;
			}
		}
	}
	.pro-small-list{
		margin-left: 32px;
		width: 355px;
		overflow: hidden;
		padding: 10px 0;
		ul{
			width: 1500px;
		}
		li{
			width: 77px;
			height: 77px;
			float: left;
			margin: 0 5px;
			position: relative;
			border: 1px solid transparent;
			&.focus,&:hover{
				border: 1px solid $normalColor;
				&:before{
					display:inline-block;
					width:0;
					height:0;
					overflow:hidden;
					line-height:0;
					font-size:0;
					vertical-align:middle;
					border-bottom:7px solid $normalColor;
					border-top:0 none;
					border-left:7px dashed transparent;
					border-right:7px dashed transparent;
					_color:#FF3FFF;
					_filter:chroma(color=#FF3FFF);
					content:"";
					left:34px;
					position:absolute;
					top:-7px;
					z-index: 9;
				}
				&:after{
					display:inline-block;
					width:0;
					height:0;
					overflow:hidden;
					line-height:0;
					font-size:0;
					vertical-align:middle;
					border-bottom:6px solid #ffffff;
					border-top:0 none;
					border-left:6px dashed transparent;
					border-right:6px dashed transparent;
					_color:#FF3FFF;
					_filter:chroma(color=#FF3FFF);
					content:"";
					left:35px;
					position:absolute;
					top:-6px;
					z-index: 10;
				}
			}
			img{
				@include imgCenter;
				max-width: 73px;
				max-height: 73px;
				border: 2px solid transparent;
			}
		}
	}
	.pro-video{
		width: 53px;
		height: 53px;
		position: absolute;
		right: 100px;
		bottom: 22px;
		a{
			display: inline-block;
			width: 100%;
			height: 100%;
			background: url(../img/video-icon.png) no-repeat center;
			overflow: hidden;
			text-indent: -999px;
		}
	}
}

// articles
#articles{
	margin-top: $defaultMargin;
	.art-tab-tit{
		display: table;
		width: 100%;
		a{
			display: table-cell;
			width: 50%;
			height: 26px;
			text-align: center;
			vertical-align: middle;
			background-color: $themeLightColor;
			color: $themeColor;
			text-decoration: none;
			&.tab-active,&.focus{
				background-color: $themeColor;
				color: $white;
			}
		}
	}
	.add-comment{
		display: block;
		width: 100%;
		height: 50px;
		text-align: center;
		font-size: 50px;
		line-height: 50px;
		color: $themeColor;
		cursor:pointer;
	}
	@at-root .art-list{
		background-color: $white;
		li{
			display: table;
			width: 100%;
			padding: 10px 0;
			border-bottom: 1px dotted $grayColor;
			&:last-child{
				border-bottom: none;
				text-align: center;
			}
		}
		.art-list-usr,.art-list-msg{
			display: table-cell;
			height: 160px;
		}
		.art-list-usr{
			width: 180px;
			vertical-align: middle;
			text-align: center;
			span{
				display: block;
				b{
					i{
						color: $themeColor;
						font-weight: bold;
					}
					margin-right: $defaultMargin/5;
				}
				s{
					font-style: normal;
					text-decoration: none;
					i{
						color: #df9f4c
					}
				}
				&:first-child{
					a{
						display: inline-block;
						width: 76px;
						height: 76px;
						border-radius: 50%;
						overflow: hidden;
						border: 1px solid $grayLightColor;
						img{
							display: inline-block;
							text-align: center;
							vertical-align: middle;
							max-width: 100%;
							max-height: 100%;
						}
					}
				}
			}
		}
		.art-list-msg{
			color: $defaultColor;
			padding-right: $defaultMargin*2;
			position: relative;
			text-align: left;
			padding-bottom: $defaultMargin*3;
			h3{
				a{
					font-size: 18px;
					color: $themeColor;
					&:hover{
						text-decoration: underline;
					}
				}
			}
			p{
				text-indent: 2em;
				line-height: 2;
				word-wrap: break-word;
				word-break: break-all;
			}
			.art-other{
				position: absolute;
				bottom: $defaultMargin;
				right: $defaultMargin*2;
				.art-time{
				}
				span{
					margin-left: $defaultMargin;
				}
			}
			a.append-more{
				margin-top: 0;
			}
		}
		a.get-more{
			i{
				color: $themeColor;
				font-size: 26px;
				margin-right: 0;
			}
		}
	}
}
// bask
#other-box{
	background-color: $white;
	width: 100%;
	font-size: 16px;
	.other-tit{
		margin-top: 40px;
		height: 40px;
		line-height: 40px;
		background-color: $themeLightColor;
		color: $themeColor;
		.pro-price{
			max-width: 50%;
			display: inline-block;
			text-indent: $defaultTextIndent;
		}
		.other-gobuy{
			display: inline-block;
			background-color: $themeColor;
			width: 50%;
			text-align: center;
			text-decoration: none;
			color: $white;
			float: right;
			@include transition;
			i.fa{
				font-size: 18px;
				color: $white;
				margin-right: 10px;
			}
			img{
				margin-right: $defaultTextIndent/2;
			}
			&:hover{
				background-color: #fd5a46;
			}
		}
	}
	.pro-other{
		overflow: hidden;
		width: 101%;
		li{
			display: inline-block;
			overflow: hidden;
			float: left;
			width: 202px;
			height: 122px;
			line-height: 120px;
			box-sizing: border-box;
			vertical-align: top;
			border-bottom: 1px dashed $grayColor;
			&:nth-child(even){
				border-left: 1px dashed $grayColor;
			}
			a{
				background-color: $white;
				display: inline-block;
				vertical-align: top;
				position: relative;
				width: 100%;
				height: 100%;
				text-indent: 20px;
				@include transition;
				&:hover{
					box-shadow: inset 0px 0px 5px rgba(0,0,0,0.1);
				}
				i{
					font-size: 36px;
					&.fa-thumbs-up {
						color: #7aa9cc;
					}
					&.fa-heart {
						color: #fd5a46;
					}
				}
				&>span{
					font-size: 18px;
				    margin-left: -16px;
				    margin-top: -7px;
				    position: absolute;
				}
			}
		}
	}
	.other-foot{
		background-color: $themeLightColor;
		color: $themeColor;
		text-align: center;
		span{
			line-height: 32px;
		}
	}
}
#bask-box{
	.bask-img{
		position: relative;
		width: 404px;
		height: 404px;
		a.img-btn{
			@include tbImgCenter(404px,404px);
		}
		span{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			color: $white;
			background-color: $defaultAlpha;
			a{
				color: $white;
			}
		}
	}
}

// relate & hot
#hot,#relate{
	background-color: $white;
	h3{
		font-size: 16px;
		margin-bottom: 10px;
		text-indent: 10px;
		border-bottom: 1px dashed $grayColor;
	}
	li{
		float: left;
    	margin-bottom: 2px;
    	margin-right: 2px;
    	vertical-align: top;
    	&:nth-child(even){
			margin-right: 0;
		}
		a{
			display: block;
			overflow: hidden;
			width: 201px;
			height: 201px;
		}
		&:nth-last-child(-n+2){
			margin-bottom: 0;
		}
	}
	img{
		width:201px;
		height:201px;
	}
}
// relate
#relate,#hot{
	li{
		float: left;
		vertical-align: top;
		margin-right: 2px;
		margin-bottom: 2px;
		&:nth-child(even){
			margin-right: 0;
		}
	}
}
#relate{
	a{
		display: block;
		overflow: hidden;
		width: 201px;
		height: 201px;
	}
}
// hot
#hot{
	& > ul{
		background-color: $grayLightColor;
		padding-bottom: -2px;
	}
	.hot-l,.hot-r{
		float: left;
		a{
			width: 100%;
			height: 100%;
			display: block;
			position: relative;
			img{
				@include imgCenter;
			}
		}
	}
	.hot-l{
		margin-right: 2px;
		width: 210px;
		height: 210px;
		a{
			&:first-child{
				margin-bottom: 2px;
			}	
		}
	}
	.hot-r{
		width: 192px;
		height: 422px;
	}
}

